import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import {
  Form, InputNumber, Select, Button,
} from 'antd';
import jishushengchanlv from '../assets/jishushengchanlv';
import styles from './JishushengchanlvLeftForm.less';

const { Option } = Select;

@Form.create()
class JishushengchanlvLeftForm extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    const {
      handleSubmit,
      form: {
        validateFieldsAndScroll,
      },
    } = this.props;
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        handleSubmit(values);
      }
    });
  };

  render() {
    const {
      form: {
        getFieldDecorator
      },
      workType,
    } = this.props;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const formTailLayout = {
      wrapperCol: { span: 24 },
    };

    // 作业类型选择
    const workTypeSelector = getFieldDecorator('workTypeSelector', {
      initialValue: Object.keys(jishushengchanlv)[0],
    })(
      <Select style={{ width: '100%' }}>
        {Object.keys(jishushengchanlv).map((v, i) => (
          <Option key={i} value={v}>{v}</Option>
        ))}
      </Select>,
    );

    // 拖拉机类型选择
    const machineTypeSelector = getFieldDecorator('machineTypeSelector', {
      initialValue: Object.keys(jishushengchanlv[workType])[0],
    })(
      <Select style={{ width: '100%' }}>
        {Object.keys(jishushengchanlv[workType]).map((v, i) => (
          <Option key={i} value={v}>{v}</Option>
        ))}
      </Select>,
    );

    // 拖拉机类型选择
    const fieldLengthSelector = getFieldDecorator('fieldLengthSelector', {
      initialValue: '200',
    })(
      <Select style={{ width: '100%' }}>
        <Option key="200" value="200">200</Option>
        <Option key="300" value="300">300</Option>
        <Option key="400" value="400">400</Option>
        <Option key="500" value="500">500</Option>
        <Option key="1000" value="1000">1000</Option>
        <Option key="1500" value="1500">1500</Option>
        <Option key="2000" value="2000">2000</Option>
      </Select>,
    );


    return (
      <Fragment>
        <Form.Item {...formItemLayout} label="作业类型">
          {workTypeSelector}
        </Form.Item>
        <Form.Item {...formItemLayout} label="拖拉机类型">
          {machineTypeSelector}
        </Form.Item>
        <Form.Item {...formItemLayout} label="地块长度">
          {fieldLengthSelector}
        </Form.Item>
        <Form.Item {...formItemLayout} label="作业幅宽（米）">
          {getFieldDecorator('workWidth', {
            rules: [{
              required: true,
              message: '请输入作业幅宽',
            }],
          })(
            <InputNumber style={{ width: '100%' }} />
          )}
        </Form.Item>
        <Form.Item {...formItemLayout} label="平均作业速度（km/h）">
          {getFieldDecorator('averageWorkSpeed', {
            rules: [{
              required: true,
              message: '请输入平均作业速度',
            }],
          })(
            <InputNumber style={{ width: '100%' }} />
          )}
        </Form.Item>
        <Form.Item {...formTailLayout} style={{ textAlign: 'center' }}>
          <Button type="primary" onClick={this.handleSubmit}>
            开始预估
          </Button>
        </Form.Item>
      </Fragment>
    );
  }
}

JishushengchanlvLeftForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
};

export default JishushengchanlvLeftForm;
